<template>
  <div class="classify">
    <div class="scrollbar-flex-content">
      <div v-for="(item, index) in data" :key="item.categoryId" :class="{ active: active == index }" @click="active = index">
        {{ item.name }}
      </div>
    </div>
    <el-scrollbar v-if="data[active]?.children" class="list" max-height="calc(370px - 64px)">
      <div class="item" v-for="item in data[active]?.children" :key="item.categoryId">
        <div @click="router.push({ path: '/shopCategories/index', query: { categoryId: item.categoryId } })">
          {{ item.name }}
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </div>
        <div v-if="item.children">
          <div
            v-for="i in item.children"
            :key="i.categoryId"
            @click="router.push({ path: '/shopCategories/index', query: { categoryId: i.categoryId } })"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getCategoryList } from "@/apis/shopHome/home";
import { useRouter } from "vue-router";

const router = useRouter();
const data = ref([]);
const active = ref(0);

onMounted(async () => {
  const res = await getCategoryList();
  data.value = res.data;
});
</script>

<style lang="scss" scoped>
.classify {
  max-height: 370px;
  width: 100vw;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 10px 10px 0px rgba(99, 111, 129, 0.2);
  border-radius: 0px 0px 10px 10px;

  .scrollbar-flex-content {
    display: flex;
    height: 64px;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;

    div {
      padding: 0 20px;
      height: 32px;
      font-weight: bold;
      line-height: 32px;
    }

    .active {
      background: #041830;
      border-radius: 4px;
      color: white;
    }
  }

  .list {
    padding: 0 20px;

    .item {
      height: 50px;
      display: flex;
      gap: 50px;
      line-height: 50px;
      cursor: pointer;

      > div:nth-child(1) {
        color: #3d3d3d;
        font-weight: bold;
        display: flex;
        gap: 8px;
        align-items: center;
      }

      > div:nth-child(2) {
        display: flex;
        gap: 30px;
      }
    }
  }
}
</style>
